<template>
  <div class="content">
      <!-- <button @click="handleClick('slotdemo1')">默认插槽</button>
      <button @click="handleClick('slotdemo2')">具名插槽</button>
      <button @click="handleClick('list')">列表</button>
      <button @click="handleClick('home')">首页</button>
      <button @click="handleClick('about')">关于</button> -->
      <a-button
        v-for="(item, index) in btnList.tabName"
        :key="index"
        class="content_child"
        @click="handleClick(Object.keys(item).toString())"
        >{{ Object.values(item).toString() }}
      </a-button
      >
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const btnList = reactive({
  tabName: [
    { slotdemo1: '默认插槽' },
    { slotdemo2: '具名插槽' },
    { list: '列表' },
    { home: '首页' },
    { about: '关于' },
  ],
})
const handleClick = (routeStr) => {
  router.push({ name: routeStr })
}
</script>
<style lang="css" scoped>
.content {
  display: flex;
  justify-content: space-between;
}
.content_child {
  flex: 1;
}
</style>
